<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NCAir（软件工程作业）</title>
    <!--<link rel="icon" href="favicon.png" type="image/png">-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./static/css/bootstrap.min.css">
    <link rel="stylesheet" href="./static/css/dashboard.css">
    <link rel="stylesheet" href="./static/css/air.css">
    <script type="text/javascript" src="./static/js/jquery.min.js"></script>
    <script type="text/javascript" src="./static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./static/js/vue.min.js"></script>
    <script type="text/javascript" src="./static/js/vue-router.js"></script>

</head>
<body>
<div id="vue_div">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="./index.html">NCAir .co（软件工程作业）</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                           aria-haspopup="true" aria-expanded="false"> {{this.arg}} <span class="badge">0</span> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <template>
                                <li><a href="#">特价机票<span class="glyphicon glyphicon-fire"></span></a></li>
                                <li><a href="#">我的订单</a></li>
                                <li><a href="#">航空日历</a></li>
                                <li><a href="#">退税中心</a></li>
                                <li><a href="#">系统消息</a></li>
                                <li role="separator" class="divider"></li>
                                <li><a href="./index.html" >退出登录</a></li>
                            </template>

                        </ul>
                    </li>
                    <li><a href="#" >在线营业厅</a></li>
                    <li><a href="#" >出行指南</a></li>
                    <li><a href="#" >联系客服</a></li>
                </ul>
                <form class="navbar-form navbar-right">
                    <input type="text" class="form-control" placeholder="查询...">
                </form>
            </div>
        </div>
    </nav>

    <!--在这里添加你的东西-->

    <div class="container-fluid">
		<br>
        <div class="row">
            <transition name="no-mode-translate-fade" mode="out-in">
                <div class="jumbotron col-xs-12 col-sm-10 col-sm-offset-1" v-if="begin===1" key="1" style="margin-top:70px;">
                    <h1 align="center">欢迎回来，尊敬的 {{arg}}!</h1>
                </div>
                <div class="jumbotrom col-xs-12 col-sm-6 col-sm-offset-3 " v-else-if="begin===2" key="2">
                    <div class="page-header">
                        <h1>也许我们能帮您做这些 <br><small>选择一项进入下一步</small></h1>
                    </div>
                    <button type="button" class="btn btn-info btn-lg btn-block" @click="change(3)">我的会员</button>
                    <button type="button" class="btn btn-info btn-lg btn-block" @click="change(5)">积分商城</button>
                    <button type="button" class="btn btn-info btn-lg btn-block" @click="change(7)">机票业务</button>

                </div>
                <div v-else-if="begin===3">
                    <!--我的会员页面-->
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="col-md-4 col-xs-12">
                                <div class="panel panel-success">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">会员信息</h3>
                                    </div>
                                    <div class="panel-body">
                                        <fieldset disabled>
                                            <div class="row">
                                                <div class="col-md-11 col-md-offset-1">
                                                    <form class="form-horizontal" role="form">
                                                        <div class="form-group">
                                                            <label for="number" class="col-sm-3 control-label">卡号</label>
                                                            <div class="col-sm-9">
                                                                <input type="text" class="form-control" id="number" placeholder="151129884">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="Chinesename" class="col-sm-3 control-label">中文姓名</label>
                                                            <div class="col-sm-9">
                                                                <input type="text" class="form-control" id="Chinesename" placeholder="张三">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="Englishname" class="col-sm-3 control-label">英文姓名</label>
                                                            <div class="col-sm-9">
                                                                <input type="text" class="form-control" id="Englishname" placeholder="San Zhang">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="sex" class="col-sm-3 control-label">性别</label>
                                                            <div class="col-sm-9">
                                                                <input type="text" class="form-control" id="sex" placeholder="男">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="identity" class="col-sm-3 control-label">证件号</label>
                                                            <div class="col-sm-9">
                                                                <input type="text" class="form-control" id="identity" placeholder="130************029">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="phonenumber" class="col-sm-3 control-label">手机号</label>
                                                            <div class="col-sm-9">
                                                                <input type="text" class="form-control" id="phonenumber" placeholder="187*****543">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="mail" class="col-sm-3 control-label">邮箱</label>
                                                            <div class="col-sm-9">
                                                                <input type="text" class="form-control" id="mail" placeholder="144526987@qq.com">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <label for="birthday" class="col-sm-3 control-label">生日</label>
                                                            <div class="col-sm-9">
                                                                <input type="text" class="form-control" id="birthday" placeholder="1986-12-13">
                                                            </div>
                                                        </div>
                                                    </form>
                                                </div>
                                            </div>
                                        </fieldset>
                                        <div class="row">
                                            <div class="col-md-8 col-md-offset-4 col-xs-4 col-xs-offset-5">
                                                <div class="btn-group" align="center">
                                                    <button class="btn btn-success">修改</button>
                                                    <button class="btn btn-success">保存</button>
                                                </div>

                                            </div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-8 col-xs-12" >
                                <div class="row">
                                    <div class="panel panel-success">
                                    <div class="panel-heading">
                                        <h3 class="panel-title">常用登记人</h3>
                                    </div>
                                    <div class="panel-body">
                                        <table class="table">
                                            <thead>
                                            <tr>
                                                <td>姓名</td>
                                                <td>证件类型</td>
                                                <td>证件号</td>
                                                <td>出生日期</td>
                                                <td>联系方式</td>
                                                <td>乘机人类型</td>
                                                <td>操作</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            <tr>
                                                <td>张三</td>
                                                <td>身份证</td>
                                                <td>130127198712130029</td>
                                                <td>1987-12-13</td>
                                                <td>18742051543</td>
                                                <td>成人</td>
                                                <td>
                                                    <button class="btn btn-primary">修改</button>
                                                    <button class="btn btn-warning">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>张小三</td>
                                                <td>身份证</td>
                                                <td>130127200310110258</td>
                                                <td>2003-10-11</td>
                                                <td>18742051544</td>
                                                <td>儿童</td>
                                                <td>
                                                    <button class="btn btn-primary">修改</button>
                                                    <button class="btn btn-warning">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>李四</td>
                                                <td>身份证</td>
                                                <td>130127198812130269</td>
                                                <td>1988-12-13</td>
                                                <td>18742011545</td>
                                                <td>成人</td>
                                                <td>
                                                    <button class="btn btn-primary">修改</button>
                                                    <button class="btn btn-warning">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>张小四</td>
                                                <td>身份证</td>
                                                <td>130127200501010123</td>
                                                <td>2005-01-01</td>
                                                <td>18742011545</td>
                                                <td>儿童</td>
                                                <td>
                                                    <button class="btn btn-primary">修改</button>
                                                    <button class="btn btn-warning">删除</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>张小五</td>
                                                <td>证件类型</td>
                                                <td>130127201401010236</td>
                                                <td>2014-01-01</td>
                                                <td>18742011545</td>
                                                <td>儿童</td>
                                                <td><button class="btn btn-primary">修改</button>
                                                    <button class="btn btn-warning">删除</button></td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>


                                </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="panel panel-success">
                                            <div class="panel-heading">
                                                <h3 class="panel-title">近期活动</h3>
                                            </div>
                                            <div class="panel-body">
                                                <ul>
                                                    <li><a href="#">宅在家里！</a></li>
                                                    <li><a href="#">拒绝出门！</a></li>
                                                    <li><a href="#">打开电脑！</a></li>
                                                    <li><a href="#">逛淘宝！</a></li>
                                                    <li><a href="#">以上纯属扯淡</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="panel panel-success">
                                            <div class="panel-heading">
                                                <h3 class="panel-title">温馨提示</h3>
                                            </div>
                                            <div class="panel-body">
                                                <p>大家新年快乐</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else-if="begin===4">
                    <!--账户管理页面-->
                </div>
                <div v-else-if="begin===5">
                    <!--积分商城页面-->
                    <div class="row">
                      <div class="col-md-offset-1">
                      <div id="myCarousel" class="carousel slide">
                        <ol class="carousel-indicators">
                          <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                          <li data-target="#myCarousel" data-slide-to="1" ></li>
                          <li data-target="#myCarousel" data-slide-to="2"></li>
                        </ol>
                        <div class="carousel-inner">
                          <div class="item active" >
                            <img src="static/img/price.jpg" alt="First slide" class="img-rounded">
                            <div class="carousel-caption"></div>
                          </div>
                          <div class="item" >
                            <img src="static/img/year.jpg" alt="Second slide" class="img-rounded">
                            <div class="carousel-caption"></div>
                          </div>
                          <div class="item" >
                            <img src="static/img/grade.jpg" alt="Third slide" class="img-rounded">
                            <div class="carousel-caption"></div>
                          </div>
                        </div>
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">last</a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">next</a>
                      </div>
                    </div>
                    </div>
                    <br><br>
                    <div class="row">
                        <div class="col-md-offset-1">
                            <div class="panel panel-default">
                                <div class="panel-heading">
                                    <h3  class="panel-title">最新商品</h3>
                                </div>
                                <div class="panel-body">
                                  <table class="table-bordered">
                                        <tr>
                                            <td>
                                                <img src="static/img/scarf.jpg">
                                            </td>
                                            <td>
                                                <img src="static/img/joyoung.jpg">
                                            </td>
                                            <td>
                                                <img src="static/img/sony.jpg">
                                            </td>
                                            <td>
                                                <img src="static/img/thinkpad.jpg">
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>价格：2000积分
                                                <button class="btn btn-info">立即兑换</button>
                                            </td>
                                            <td>价格：2000积分
                                                <button class="btn btn-info">立即兑换</button>
                                            </td>
                                            <td>价格：2000积分
                                                <button class="btn btn-info">立即兑换</button>
                                            </td>
                                            <td>价格：2000积分
                                                <button class="btn btn-info">立即兑换</button>
                                            </td>
                                        </tr>
                                  </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br><br><br><br>
                    <div class="row">
                        <div class="col-md-offset-1">
                            <div class="panel panel-heading">
                                <nav class="navbar navbar-default" role="navigation">
                                    <div class="container-fluid">
                                        <div class="navbar-header">
                                            <a class="navbar-brand" href="#">兑换商城</a>
                                        </div>
                                        <div>
                                            <ul class="nav navbar-nav">
                                                <li class="active">
                                                    <a href="#">家电</a>
                                                </li>
                                                <li>
                                                    <a href="#">服饰</a>
                                                </li>
                                                <li>
                                                    <a href="#">生活用品</a>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                            <div class="panel panel-body">
                                <table class="table-bordered">
                                  <tr>
                                      <td>
                                          <img src="static/img/refrigerator.jpg">
                                      </td>
                                      <td>
                                          <img src="static/img/DVD.jpg">
                                      </td>
                                      <td>
                                          <img src="static/img/washer.jpg">
                                      </td>
                                      <td>
                                          <img src="static/img/stove.jpg">
                                      </td>
                                  </tr>
                                  <tr>
                                      <td>价格：2000积分
                                          <button class="btn btn-info">立即兑换</button>
                                      </td>
                                      <td>价格：2000积分
                                          <button class="btn btn-info">立即兑换</button>
                                      </td>
                                      <td>价格：2000积分
                                          <button class="btn btn-info">立即兑换</button>
                                      </td>
                                      <td>价格：2000积分
                                          <button class="btn btn-info">立即兑换</button>
                                      </td>
                                  </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-else-if="begin===6">
                    <!--订单一览页面-->
                </div>
                <div class="row" v-else-if="begin===7" key="7">
                    <!--机票预定页面-->
                    <div class="col-sm-2 hidden-xs">
                        <ul class="nav nav-pills nav-stacked nav-fixed">
                            <li role="presentation" class="active"><a href="#">目录</a></li>
                            <hr>
                            <li role="presentation"><a href="#">国内出发</a></li>
                            <li role="presentation"><a href="#">国际出发</a></li>
                            <li role="presentation"><a href="#">近期已出行</a></li>
                            <hr>
                            <li role="presentation"><a href="#">VIP专享</a></li>
                        </ul>
                    </div>

                    <div class="col-sm-10">
                        <div class="row">
                            <div class="col-xs-12 col-sm-6  table-responsive ">
                                <div class="panel panel-default">
                                    <div class="panel-heading"><h4 align="center"><span class="glyphicon glyphicon-th-large"></span>国内出发</h4></div>
                                    <table class="table table-hover table-bordered table-striped">
                                        <tr>
                                            <th>状态</th>
                                            <th>出发时间</th>
                                            <th>预计到达</th>
                                            <th>出发机场</th>
                                            <th>到达机场</th>
                                            <th>取票口</th>
                                            <th>出发机场VIP休息室</th>
                                            <th>优先登机</th>
                                            <th>行李转盘</th>
                                        </tr>
                                        <tr class="danger">
                                            <td>待确认</td>
                                            <td>2017.12.30  11:35</td>
                                            <td>当日 13:40</td>
                                            <td>大连周水子机场</td>
                                            <td>武汉天河机场</td>
                                            <td>···</td>
                                            <td>···</td>
                                            <td>···</td>
                                            <td>···</td>
                                        </tr>
                                        <tr>
                                            <td>已出票</td>
                                            <td>2017.12.02  16:20</td>
                                            <td>当日 18:00</td>
                                            <td>大连周水子机场</td>
                                            <td>上海虹桥机场</td>
                                            <td>35-41</td>
                                            <td>可用</td>
                                            <td>允许</td>
                                            <td>waiting</td>
                                        </tr>
                                        <tr>
                                            <td>登机中</td>
                                            <td>2017.11.28  08:05</td>
                                            <td>当日 10:10</td>
                                            <td>广州白云机场</td>
                                            <td>南京禄口机场</td>
                                            <td>10-20</td>
                                            <td>已满</td>
                                            <td>允许</td>
                                            <td>waiting</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6  table-responsive ">
                                <div class="panel panel-default">
                                    <div class="panel-heading"><h4 align="center"><span class="glyphicon glyphicon-th-large"></span>国际出发</h4></div>
                                    <table class="table table-hover table-bordered table-striped">
                                        <tr>
                                            <th>状态</th>
                                            <th>出发时间</th>
                                            <th>预计到达</th>
                                            <th>出发机场</th>
                                            <th>到达机场</th>
                                            <th>取票口</th>
                                            <th>出发机场VIP休息室</th>
                                            <th>优先登机</th>
                                            <th>行李转盘</th>
                                        </tr>
                                        <tr class="danger">
                                            <td>已出票</td>
                                            <td>2018.01.30  11:35</td>
                                            <td>当日 18:40</td>
                                            <td>大连周水子机场</td>
                                            <td>洛杉矶国际机场</td>
                                            <td>23-26</td>
                                            <td>可用</td>
                                            <td>允许</td>
                                            <td>···</td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="btn-group" role="group" style="display:table;width:auto;margin-left:auto;margin-right: auto">
                                    <button class="btn btn-primary "><span class="glyphicon glyphicon-ok"></span>退票</button>
                                </div>
                            </div>
                            <div class="col-xs-12 col-sm-6  table-responsive ">
                                <div class="panel panel-default">
                                    <div class="panel-heading"><h4 align="center"><span class="glyphicon glyphicon-th-large"></span>近期已出行</h4></div>
                                    <table class="table table-hover table-bordered table-striped">
                                        <tr>
                                            <th></th>
                                            <th>状态</th>
                                            <th>出发时间</th>
                                            <th>出发机场</th>
                                            <th>到达机场</th>
                                            <th>取票口</th>
                                            <th>出发机场VIP休息室</th>
                                            <th>优先登机</th>
                                            <th>行李转盘</th>
                                        </tr>
                                        <tr class="danger">
                                            <td><input type="checkbox"></td>
                                            <td>已完成</td>
                                            <td>2018.11.13  12:30</td>
                                            <td>大连周水子机场</td>
                                            <td>芝加哥奥黑尔机场</td>
                                            <td>禁止取票</td>
                                            <td>禁止使用</td>
                                            <td>禁止</td>
                                            <td>5</td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="btn-group" role="group" style="display:table;width:auto;margin-left:auto;margin-right: auto">
                                    <button class="btn btn-primary "><span class="glyphicon glyphicon-ok"></span>删除</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
            <transition name="fade">
                <div v-if="begin>2">
                    <a class="btn btn-default"
                            style="position: fixed;left:5%;top:10%;border-radius:45%;background:
                            rgba(255,255,255,0.29);opacity:.5;z-index:1000;"
                            @click="change(2)" href="#"><span class="glyphicon glyphicon-chevron-left"></span></a>
                </div>
            </transition>
        </div>
    </div>
    </div>
</body>
<script>
//    window.onload=function () {

        var myvue=new Vue({
            el: '#vue_div',
            data:{
                arg:location.search.substring(1).replace('name=_',''),
                begin:1,
            },
            methods:{
                change:function(index){
                    this.begin=index;
                }
            },
            created:function(){
//                var _this=this;
//                alert(1);
                var t=setTimeout("console.log(myvue._data.begin=2);",1000);
            }
        });


//    }
</script>
<style>
    .fade-enter-active, .fade-leave-active {
        transition: opacity .5s
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active in below version 2.1.8 */ {
        opacity: 0
    }
    .no-mode-translate-fade-enter-active, .no-mode-translate-fade-leave-active {
        transition: all .5s;
    }
    .no-mode-translate-fade-enter, .no-mode-translate-fade-leave-active {
        opacity: 0;
    }
    .no-mode-translate-fade-enter {
        transform: translateY(31px);
    }
    .no-mode-translate-fade-leave-active {
        transform: translateY(-31px);
    }
</style>
</html>
